<template>
  <div class="nursing-detail">
    <!-- 基本信息区域 -->
    <div class="section-title">基本信息</div>
    <el-card class="info-card">
      <el-descriptions column="2" border>
        <el-descriptions-item label="老人姓名">{{ oldName }}</el-descriptions-item>
        <el-descriptions-item label="护理等级">{{ nursingLevel }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ age }}</el-descriptions-item>
        <el-descriptions-item label="床位号">{{ bedNo }}</el-descriptions-item>
        <el-descriptions-item label="护理员姓名">
          {{ nursingNameList.join('、') }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 护理项目区域 -->
    <div class="section-title">护理项目</div>
    <el-card class="info-card">
      <el-descriptions column="2" border>
        <el-descriptions-item label="护理项目名称">{{ itemName }}</el-descriptions-item>
        <el-descriptions-item label="关联单据">{{ relatedDoc }}</el-descriptions-item>
        <el-descriptions-item label="执行状态">
          <el-tag 
            :type="statusType" 
            effect="dark"
          >{{ statusText }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="项目类型">护理等级外</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ creator }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ createTime }}</el-descriptions-item>
        <el-descriptions-item label="期望服务时间">{{ expectTime }}</el-descriptions-item>
        <el-descriptions-item label="备注信息">{{ remark }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 动态记录区域（已执行/已取消） -->
    <template v-if="activeTab === 'executed'">
      <div class="section-title">执行记录</div>
      <el-card class="info-card">
        <el-descriptions column="1" border>
          <el-descriptions-item label="执行人">{{ executePerson || '系统默认' }}</el-descriptions-item>
          <el-descriptions-item label="实际执行时间">{{ actualExecuteTime || expectTime }}</el-descriptions-item>
          <el-descriptions-item label="执行照片">
            <div class="img-group">
              <img 
                src="https://via.placeholder.com/150x100?text=执行记录1" 
                alt="执行照片1" 
                class="record-img"
              >
              <img 
                src="https://via.placeholder.com/150x100?text=执行记录2" 
                alt="执行照片2" 
                class="record-img"
              >
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="执行详情">
            <p>{{ executeDetail || '已按标准流程完成护理服务，老人状态良好，无异常反馈。' }}</p>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </template>

    <template v-if="activeTab === 'canceled'">
      <div class="section-title">取消记录</div>
      <el-card class="info-card">
        <el-descriptions column="1" border>
          <el-descriptions-item label="取消人">{{ cancelPerson || '系统默认' }}</el-descriptions-item>
          <el-descriptions-item label="取消时间">{{ cancelTime || createTime }}</el-descriptions-item>
          <el-descriptions-item label="取消原因">
            <p>{{ cancelReason || '未提供具体原因（实际数据从接口获取）' }}</p>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </template>

    <!-- 返回按钮 -->
    <div class="back-btn">
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { computed, onMounted } from 'vue'
import { ref } from 'vue'
import request from '@/utils/request'

// 路由相关
const route = useRoute()
const router = useRouter()
const remark=ref('')
const sex=ref('')
const age=ref('')
const nursingNameList=ref([])
const nursingLevel=ref('')

// 从列表页传递的参数中获取数据
const {
  oldName,
  itemName,
  bedNo,
  expectTime,
  relatedDoc,
  createTime,
  creator,
  activeTab, // 护理员姓名（列表页row中存在该字段）
  itemType,
} = route.query
onMounted(() => {
 getNursingDetail()
})
const getNursingDetail=()=>{
   request(
    {
      url: '/nursing/job1/detail',
      method: 'get',
      params: {
        orderNo: relatedDoc,
        bedNo: bedNo,
        creator,
        oldName
      }
    }
  ).then(res => {
    remark.value = res.data.remark;
    sex.value=res.data.sex;
    age.value=res.data.age;
    nursingNameList.value=res.data.nursingNameList;
    nursingLevel.value=res.data.nursingLevel;

  })
}
// 动态状态文本（根据activeTab显示）
const statusText = computed(() => {
  const statusMap = {
    pending: '待执行',
    executed: '已执行',
    canceled: '已取消'
  }
  return statusMap[activeTab] || '未知状态'
})

// 动态状态标签类型（样式控制）
const statusType = computed(() => {
  const typeMap = {
    pending: 'warning', // 待执行-橙色
    executed: 'success', // 已执行-绿色
    canceled: 'danger' // 已取消-红色
  }
  return typeMap[activeTab] || 'info'
})

// 执行记录相关数据（实际项目中从接口获取，这里模拟）
const executePerson = '张护士' // 执行人
const actualExecuteTime = '2025-10-22 09:30:00' // 实际执行时间
const executeDetail = '今日为老人完成晨间护理，包括口腔清洁、血压测量（120/80mmHg）、协助翻身。老人精神状态良好，自述睡眠质量佳。' // 执行详情

// 取消记录相关数据（实际项目中从接口获取，这里模拟）
const cancelPerson = '李护工' // 取消人
const cancelTime = '2025-10-21 16:45:00' // 取消时间
const cancelReason = '老人家属反馈老人当日身体不适，申请推迟护理服务，后续将重新预约时间。' // 取消原因

// 返回上一页
const goBack = () => {
  router.back()
}
</script>

<style scoped>
.nursing-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 区域标题样式 */
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 20px 0 10px;
  padding-left: 5px;
  border-left: 3px solid #409eff;
}

/* 信息卡片样式 */
.info-card {
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 执行记录图片样式 */
.img-group {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}
.record-img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* 返回按钮样式 */
.back-btn {
  text-align: center;
  margin-top: 30px;
}
</style>